<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="信息分类：">
      <el-select v-model="form.categoryId" placeholder="">
        <el-option
          v-for="item in data.category"
          :key="item.id"
          :value="item.id"
          :label="item.category_name"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="新闻标题：">
      <el-input v-model="form.title"></el-input>
    </el-form-item>

    <el-form-item label="缩略图："> 缩略图 </el-form-item>

    <el-form-item label="发布日期：">
      <el-date-picker
        v-model="form.dataTime"
        type="date"
        placeholder="选择日期"
        disabled
      >
      </el-date-picker>
    </el-form-item>

    <el-form-item label="详细内容：">
      <quillEditor
        v-model="form.content"
        ref="myQuillEditor"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit" :loading="data.submitLoading">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { GetList,EditInfo } from "@/api/news";
import { timestampToTime } from "@/utils/common.js";
import { reactive, ref, watch, onMounted } from "@vue/composition-api";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "infoDetailed",
  components: { quillEditor },
  setup(props, { root }) {
    // data
    const data = reactive({
      id: String(root.$route.query.id),
      category: [],
      editorOption:[],
      submitLoading:false
    });

    const form = reactive({
      categoryId: "",
      title: "",
      dataTime: "",
      content: "",
    });

    let title = root.$route.query.title;
    // console.log(id);
    console.log(title);

    /**
     * 获取信息分类
     */
    const getInfoCategory = () => {
      root.$store.dispatch("common/getInfoCategory").then((res) => {
        console.log(res);
        data.category = res;
      });
    };
    /**
     * 获取当前id信息
     */
    const getInfo = () => {
      let requestData = {
        pageNumber: 1,
        pageSize: 1,
        id: data.id,
      };
      GetList(requestData).then((response) => {
        console.log(response);
        let requestData = response.data.data.data[0];
        console.log(requestData);
        form.categoryId = requestData.categoryId;
        form.title = requestData.title;
        form.dataTime = timestampToTime(requestData.createDate);
        form.content = requestData.content;
      });
    };

    /**
     * 提交信息
     */
    const submit = () => {
      console.log(data);
      let requestData = {
        id:data.id,
        categoryId: form.categoryId,
        title: form.title,
        content: form.content,
        imgUrl: form.title
      };

      data.submitLoading = true;
      EditInfo(requestData)
        .then((response) => {
          let responseData = response.data;
          root.$message({
            message: responseData.message,
            type: "success",
          });
          data.submitLoading = false;

         
        })
        .catch((error) => {
          data.submitLoading = false;
        });
    };

    onMounted(() => {
      getInfoCategory(), getInfo();
    });

    return {
      // ref
      //reavtive
      data,
      form,
      //methods
      getInfoCategory,
      getInfo,
      submit
    };
  },
};
</script>

<style lang="scss" scoped></style>
